<template>
	<view class="i-login">
		<view class="mask pos-fixed pos-lt"></view>
		<view class="content h-100p border-box flex-col pos-relative zindex-2 padding-top-192 padding-x-60">
			<view class="title color-white f-60 lh-86 fw-500">
				欢迎使用！
			</view>
			<form class="flex-1" @submit="submit" @reset="reset">
				<view class="form-content margin-top-42 round-16 bgc-white padding-top-40 padding-bottom-70 padding-x-50">
					<view class="input-item padding-top-32 phone padding-y-22 flex flex-start-center">
						<text class="iconfont icon-shoujihao m-r-10 color-99 f-30"></text>
						<input v-model="formData.phone" class="flex-1" type="text" placeholder="请输入手机号" />
					</view>
					<view class="input-item padding-top-32 code padding-y-22 flex flex-start-center">
						<text class="iconfont icon-yanzhengyanzhengma m-r-10 color-99 f-30"></text>
						<input v-model="formData.smsCode" class="flex-1" type="text" placeholder="请输入验证码" />
						<view @click="getCode" class="get-code round-999 color-white flex-center-center f-28 lh-40 padding-x-25 padding-y-10">
							获取验证码
						</view>
					</view>
				</view>
				<view @click="submit" class="submit m-t-96 flex-center-center color-white f-32 fw-700 lh-32 h-90 round-999">
					登录
				</view>
				<view class="unit m-t-40 fw-500 flex-between-center padding-x-40 f-28 lh-40 color-66">
					<text @click="trouble">遇见问题</text>
					<text @click="forget">忘记密码</text>
				</view>
			</form>
			<view class="bottom">
				<view class="line flex-between-center color-99 lh-42 f-28">第三方账号登录</view>
				<view class="list flex-around-center margin-top-42">
					<view class="item w-72 h-72 round-999 bgc-ee">
						<image src="" mode=""></image>
					</view>
					<view class="item w-72 h-72 round-999 bgc-ee">
						<image src="" mode=""></image>
					</view>
					<view class="item w-72 h-72 round-999 bgc-ee">
						<image src="" mode=""></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { onLoad } from '@dcloudio/uni-app';
	import { ref } from "vue"
	
	const formData = ref({
		phone: "",
		smsCode: ""
	})
	
	onLoad(()=>{
		
	})
	
	// 获取验证码
	function getCode(){
		
	}
	// 提交表单
	function submit(){
		if(!formData.value.phone){
			uni.showToast({
				title: "手机号不能为空！",
				mask: true,
				icon: "none",
				position: "center"
			})
			return
		}
		if(!formData.value.smsCode){
			uni.showToast({
				title: "验证码不能为空！",
				mask: true,
				icon: "none",
				position: "center"
			})
			return
		}
		console.log(formData.value)
	}
	// 清空表单
	function reset(){
		
	}
	// 遇见问题
	function trouble(){
		
	}
	// 忘记密码
	function forget(){
		
	}
	function capError(){
		
	}
</script>

<style lang="scss" scoped>
.i-login{
	width: 100%;
	height: 100%;
	.mask{
		border-radius: 0 0 30rpx 30rpx;
		width: 100%;
		height: 520rpx;
		background: linear-gradient(211.61deg, #1DB2FF 0%, #047BFF 100%);
	}
	.content{
		.title{
			text-shadow: 0px 3px 6px #1054B7;
		}
		.form-content{
			box-shadow: 0px 3px 6px #DBECFF;
			.input-item{
				border-bottom: 1px solid #D0D0D0;
				.get-code{
					background-color: #047BFF;
				}
			}
		}
		.submit{
			background: linear-gradient(160.78deg, #1DB2FF 0%, #047BFF 100%);
		}
	}
	.bottom{
		padding-bottom: calc(50rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(50rpx + env(safe-area-inset-bottom));
		.line{
			&::after,&::before{
				content: "";
				height: 1px;
				flex: 1;
				background-color: #D0D0D0;
			}
			&::before{
				margin-right: 60rpx;
			}
			&::after{
				margin-left: 60rpx;
			}
		}
		.list{
			.item{
				
			}
		}
	}
}
</style>
